home *** CD-ROM | disk | FTP | other *** search
- <html>
-
- <head>
-
- <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
-
- <title>Media Player Classic</title>
-
- <script language="JavaScript" type="text/JavaScript">
-
- function getXMLHTTP()
- {
- try {return new ActiveXObject("Msxml2.XMLHTTP");}
- catch(e) {try {return new ActiveXObject("Microsoft.XMLHTTP");}
- catch(e) {}}
- if(typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();}
- return null;
- }
-
- function MakeRequest(req)
- {
- var httpRequest = getXMLHTTP();
-
- try
- {
- httpRequest.open("GET", req, true);
- httpRequest.send(null);
- }
- catch(e)
- {
- }
- }
-
- function urlencode(s)
- {
- if(encodeURIComponent) return encodeURIComponent(s);
- if(escape) return escape(s);
- return s; // whatever
- }
-
- function getOffsetX(m)
- {
- var x = m.offsetLeft;
- while (m.offsetParent) {x += (m = m.offsetParent).offsetLeft; }
- return x;
- }
-
- OnStatus = function(title, status, pos, posstr, dur, durstr, muted, volume)
- {
- var maxtitle = 70;
- if(title.length > maxtitle) title = title.substr(0, maxtitle-3) + '...';
- var timestr = dur > 0 && posstr && durstr ? posstr + ' / ' + durstr : ' ';
- if(!dur || dur == 0) dur = 1;
- var sbpercent = Math.floor(100*pos/dur);
-
- if(e = document.getElementById('title')) e.innerHTML = title;
- if(e = document.getElementById('seekbarchleft')) e.width = sbpercent > 0 ? sbpercent + '%' : '1px';
- if(e = document.getElementById('seekbarchright')) e.width = sbpercent < 100 ? (100 - sbpercent) + '%' : '1px';
- if((e = document.getElementById('status')) && e.innerHTML != status) e.innerHTML = status;
- if((e = document.getElementById('timer')) && e.innerHTML != timestr) e.innerHTML = timestr;
- if(e = document.getElementById('controlvolumemute')) {url = 'url(controlvolume' + (muted?'off':'on') + '.png)'; if(e.style.backgroundImage != url) e.style.backgroundImage = url;}
- if(e = document.getElementById('controlvolumegrip'))
- {
- volume = (document.getElementById('controlvolumebar').offsetWidth - e.offsetWidth) * volume / 100;
- e.style.position = 'relative';
- e.style.top = '2px';
- e.style.left = Math.floor(volume) + 'px';
- }
- }
-
- var httpRequestStatus;
-
- function OnReadyStateChange()
- {
- if(httpRequestStatus && httpRequestStatus.readyState == 4 && httpRequestStatus.responseText)
- {
- if(httpRequestStatus.responseText.charAt(0) != "<") eval(httpRequestStatus.responseText);
- else {alert(httpRequestStatus.responseText);}
- httpRequestStatus = null;
- }
- }
-
- function StatusLoop()
- {
- if(!httpRequestStatus || httpRequestStatus.readyState == 0)
- {
- httpRequestStatus = getXMLHTTP();
-
- try
- {
- httpRequestStatus.open("GET", 'status.html', true);
- httpRequestStatus.onreadystatechange = OnReadyStateChange;
- httpRequestStatus.send(null);
- }
- catch(e)
- {
- }
- }
-
- setTimeout("StatusLoop()", 500);
- }
-
- var snapshotcounter = 0;
-
- function LoadSnapShot()
- {
- if(img = document.getElementById('snapshot'))
- {
- img.src = 'snapshot.jpg' + '?' + snapshotcounter++;
- }
- }
-
- function OnLoadSnapShot()
- {
- setTimeout("LoadSnapShot()", 5000);
- }
-
- function OnAbortErrorSnapShot(e)
- {
- setTimeout("LoadSnapShot()", 10000);
- }
-
- function OnSeek(e)
- {
- left = right = 0;
- if(sb = document.getElementById('seekbarchleft')) left = getOffsetX(sb);
- if(sb = document.getElementById('seekbarchright')) {right = getOffsetX(sb) + sb.offsetWidth;}
- if(sb = document.getElementById('seekbargrip')) {left += sb.offsetWidth / 2; right -= sb.offsetWidth / 2;}
- if(left > 0 && left < right)
- {
- percent = 100 * ((window.event ? window.event.clientX : e.clientX) - left) / (right - left);
- if(percent < 0) percent = 0;
- else if(percent > 100) percent = 100;
-
- MakeRequest('command.html?wm_command=[setposcommand]&percent='+percent);
- }
- }
-
- function OnVolume(e)
- {
- left = right = 0;
- if(cv = document.getElementById('controlvolumebar')) {left = getOffsetX(cv)+3; right = getOffsetX(cv) + cv.offsetWidth-3;}
- if(left > 0 && left < right)
- {
- percent = 100 * ((window.event ? window.event.clientX : e.clientX) - left) / (right - left);
- if(percent < 0) percent = 0;
- else if(percent > 100) percent = 100;
-
- MakeRequest('command.html?wm_command=[setvolumecommand]&volume='+percent);
- }
- }
-
- function OnCommand(id)
- {
- MakeRequest('command.html?wm_command='+id);
- }
-
- function Init()
- {
- StatusLoop();
- LoadSnapShot();
-
- if(e = document.getElementById('seekbar'))
- e.onclick = OnSeek;
-
- if(e = document.getElementById('controlvolumebar'))
- e.onclick = OnVolume;
- }
-
- </script>
-
- <style>
- img {padding: 0; margin: 0; border: 0;}
- #player {margin-left: auto; margin-right: auto;}
- #player td {font-family: Sans-Serif; font-size: 13px;}
- #header {width: 100%;}
- #header td {height: 30px;}
- #headericon {background-image: url(headericon.png); background-repeat: no-repeat; width: 22px;}
- #headerback {background-image: url(headerback.png); background-repeat: repeat-x; color: white; font-weight: bold; padding-top: 5px}
- #headerclose {background-image: url(headerclose.png); background-repeat: no-repeat; width: 28px;}
- #title, #status, #posstr, #durstr {display: inline;}
- #menu td {font-family: Sans-Serif; font-size: 12px; padding: 1px 5px;}
- #menu, #controlbar {background-color: #ece6d4;}
- #statusbar td {font-family: Sans-Serif; font-size: 12px;}
- #video, #statusbar {background-color: black; color: white;}
- #video {padding: 1px; cursor: pointer;}
- #controlbar {background-image: url(controlback.png); background-repeat: repeat-x; height: 28px;}
- #controlbuttonplay {background-image: url(controlbuttonplay.png); background-repeat: no-repeat; width: 25px; height: 28px;}
- #controlbuttonpause {background-image: url(controlbuttonpause.png); background-repeat: no-repeat; width: 23px; height: 28px;}
- #controlbuttonstop {background-image: url(controlbuttonstop.png); background-repeat: no-repeat; width: 25px; height: 28px;}
- #controlbuttonskipback {background-image: url(controlbuttonskipback.png); background-repeat: no-repeat; width: 24px; height: 28px;}
- #controlbuttondecrate {background-image: url(controlbuttondecrate.png); background-repeat: no-repeat; width: 22px; height: 28px;}
- #controlbuttonincrate {background-image: url(controlbuttonincrate.png); background-repeat: no-repeat; width: 23px; height: 28px;}
- #controlbuttonskipforward {background-image: url(controlbuttonskipforward.png); background-repeat: no-repeat; width: 28px; height: 28px;}
- #controlbuttonstep {background-image: url(controlbuttonstep.png); background-repeat: no-repeat; width: 31px; height: 28px;}
- #controlvolumemute {background-image: url(controlvolumeon.png); background-repeat: no-repeat; width: 28px; height: 28px;}
- #controlvolumebar {background-image: url(controlvolumebar.png); background-repeat: no-repeat; width: 55px; height: 28px;}
- #seekbar {background-image: url(seekbarmid.png); background-repeat: repeat-x;}
- #seekbar td {height: 15px;}
- #center {width: 100%;}
- #leftside {background-image: url(leftside.png); background-repeat: repeat-y; width: 4px;}
- #rightside {background-image: url(rightside.png); background-repeat: repeat-y; width: 4px;}
- #leftbottomside {background-image: url(leftbottomside.png); background-repeat: repeat-x; width: 4px; height: 4px;}
- #bottomside {background-image: url(bottomside.png); background-repeat: repeat-x; height: 4px;}
- #rightbottomside {background-image: url(rightbottomside.png); background-repeat: repeat-x; width: 4px; height: 4px;}
- </style>
-
- </head>
-
- <body onload="Init()">
-
- <div align="center">
- <table id="player" cellpadding="0" cellspacing="0">
- <tr>
- <td colspan="3">
- <table id="header" cellpadding="0" cellspacing="0">
- <tr>
- <td id="headericon"></td>
- <td id="headerback"><nobr> <div id="title"></div> </nobr></td>
- <td id="headerclose" onclick="OnCommand(816)"></td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td id="leftside"></td>
- <td>
- <table cellpadding="0" cellspacing="0" id="center">
- <tr>
- <td>
- <table id="menu" width="100%">
- <tr>
- <td>File</td>
- <td>View</td>
- <td>Play</td>
- <td>Navigate</td>
- <td>Favorites</td>
- <td width="100%" align="right">Help</td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td id="video" align="center" onclick="OnCommand(889)">
- <img src="snapshot.png" alt="snapshot" id="snapshot" onload="OnLoadSnapShot()" onabort="OnAbortErrorSnapShot()" onerror="OnAbortErrorSnapShot()" />
- </td>
- </tr>
- <tr>
- <td>
- <table width="100%" id="seekbar" cellpadding="0" cellspacing="0">
- <tr>
- <td id="seekbarleft"><img src="seekbarleft.png"></td>
- <td id="seekbarchleft" width="0%"></td>
- <td id="seekbargrip"><img src="seekbargrip.png"></td>
- <td id="seekbarchright" width="100%"></td>
- <td id="seekbarright"><img src="seekbarright.png"></td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>
- <table width="100%" cellpadding="0" cellspacing="0" id="controlbar">
- <tr>
- <td id="controlbuttonplay" onclick="OnCommand(887)"></td>
- <td id="controlbuttonpause" onclick="OnCommand(888)"></td>
- <td id="controlbuttonstop" onclick="OnCommand(890)"></td>
- <td id="controlbuttonskipback" onclick="OnCommand(920)"></td>
- <td id="controlbuttondecrate" onclick="OnCommand(894)"></td>
- <td id="controlbuttonincrate" onclick="OnCommand(895)"></td>
- <td id="controlbuttonskipforward" onclick="OnCommand(921)"></td>
- <td id="controlbuttonstep" onclick="OnCommand(891)"></td>
- <td> </td>
- <td id="controlvolumemute" onclick="OnCommand(909)"></td>
- <td id="controlvolumebar" valign="top"><img src="controlvolumegrip.png" id="controlvolumegrip"></td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>
- <table width="100%" id="statusbar">
- <tr>
- <td><div id="status"></div></td>
- <td align="right"><div id="timer"> </div></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- <td id="rightside"></td>
- </tr>
- <tr>
- <td id="leftbottomside"></td>
- <td id="bottomside"></td>
- <td id="rightbottomside"></td>
- </tr>
- </table>
- </div>
- </body>
-
- </html>